<template>
  <div class="wrap">
    <!-- header头部 -->
    <!-- <m-header
      :activeIndex="2"
      :backcolor="'#1968FA'"
      :color="'#fff'"
      opacity="1"
      hocolor="#fff"
      filter="blur(0px)"
    ></m-header> -->
    <div style="height: 50px"></div>
    <div class="container" style="margin: 30px auto">
      <el-page-header
        :title="'退出'"
        @back="goBack"
        :content="this.datalist.title"
      >
      </el-page-header>
      <div class="subject">
        <el-row>
          <el-col :sm="24">
            <div class="left-content">
              <p class="sub-title">案例分析题</p>
              <div class="scrollMenuBox">
                <div class="subbox-box">
                  <div class="title">
                    <span class="tihao">1</span>
                    <span v-if="datalist.mp4Url"
                      >请认真观看视频回答下面的问题。</span
                    >
                    <span v-else-if="datalist.imgUrl"
                      >请认真浏览图片回答下面的问题。</span
                    >
                    <span v-else>请认真阅读下方文字回答下面的问题。</span>
                  </div>
                  <div>
                    <div>
                      <div
                        style="
                          margin-bottom: 10px;
                          padding: 0px 60px;
                          display: flex;
                          justify-content: space-evenly;
                        "
                        v-if="datalist.fileUrl"
                      >
                        <img :src="datalist.fileUrl" style="height: 300px" />
                      </div>
                      <div
                        style="margin-bottom: 10px; padding: 0px 60px"
                        v-if="datalist.mp4Url"
                      >
                        <video
                          v-if="datalist.mp4Url"
                          ref="vueMiniPlayer"
                          style="height: 500px; width: 100%"
                          id="video"
                          :src="datalist.mp4Url"
                          controls="true"
                          autoplay
                          preload="auto"
                        ></video>
                      </div>
                      <!-- <div
                        style="padding: 30px; word-break: break-all;"
                        v-html="datalist.values.replace(/\n/g, '<br/>')"
                      ></div> -->
                      <textarea
                        v-if="datalist.values"
                        style="
                          resize: none;
                          background: rgb(255, 255, 255);
                          width: 1137px;
                          border: none;
                          height: 253px;
                        "
                        name=""
                        id=""
                        cols="30"
                        rows="10"
                        :value="datalist.values"
                        disabled
                      >
                      </textarea>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="answer-content" v-if="isShow">
                <div class="tip">解析：</div>
                <div class="content">
                  暂无内容1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                </div>
              </div>
              <div class="check-answer" v-else>
                <el-button
                  @click="hanldeCheckDaan(true)"
                  type="primary"
                  style="width: 304px; color: #fff; background: #1968fa"
                  >查看答案</el-button
                >
              </div> -->
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- footer页脚 -->
    <!-- <m-fotter /> -->
  </div>
</template>

<script>
import { insertUpdateCase } from "@/api/resourcesDetails.js";
// import { STATUS_CODE_OK } from "@/config";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
export default {
  data() {
    return {
      datalist: {}, // 路由数据-考试信息
      // isShow: false,
    };
  },
  async created() {
    await this.handleGetData();
    this.handleStatisticLearnTime();
    if (this.$refs.vueMiniPlayer) {
      this.$refs.vueMiniPlayer.pause();
    }
  },

  methods: {
    // 答案显示隐藏
    // async hanldeCheckDaan(isShow) {
    //   try {
    //     await this.$confirm("是否查看答案？", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     });

    //     this.isShow = isShow;
    //   } catch {
    //     console.log("取消");
    //   }
    // },
    // pdf和视频更新记录
    async handleStatisticLearnTime() {
      await insertUpdateCase({
        paperTitle: this.datalist.title,
      });
    },
    async goBack() {
      try {
        await this.$confirm("是否退出练习?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.$router.push(sessionStorage.getItem("goback"));
      } catch {
        console.log("取消");
      }
    },
    // 获取本地基本详情数据
    handleGetData() {
      if (this.$route.params.row) {
        sessionStorage.setItem("case", JSON.stringify(this.$route.params.row));
      }
      this.datalist = JSON.parse(sessionStorage.getItem("case"));
    },
  },
  // components: {
  //   MHeader,
  //   MFotter,
  // },
};
</script>
<style>
.el-button--primary {
  color: #ffffff;
  background-color: #1968fa !important;
  border-color: #1968fa !important;
}
</style>
<style lang="scss" scoped>
.el-page-header {
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #ebeff2;
}
::v-deep .el-page-header__title {
  line-height: 23px !important;
  width: 60px !important;
  text-align: center;
  height: 26px !important;
  color: #ff9500;
  /* line-height: 43px; */
  border-radius: 20px;
  border: 1px solid #ff9500;
}
::v-deep .el-page-header__left .el-icon-back {
  display: none;
}
::v-deep .el-page-header__title {
  width: 80px;
}

::v-deep .el-radio-button__inner {
  border-radius: 70px;
  width: 25px;
  height: 25px;
  line-height: 24px;
  text-align: center;
  padding: 0px;
  margin-right: 10px;
}

::v-deep .el-checkbox-group {
  display: inline-block !important;
  vertical-align: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 20px 0px;
}
::v-deep .el-checkbox-button {
  position: relative;
  margin: 0px 10px !important;
}
::v-deep .el-checkbox-button__inner {
  border: 1px solid #8d9399;
  color: #8d9399 !important;
  text-align: none !important;
  box-sizing: border-box !important;
  margin: 0px !important;
  transition: none !important;
  padding: 0px !important;
  border-radius: none !important;
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}
::v-deep .el-page-header__content {
  font-size: 22px;
  color: #333;
  text-align: center;
  width: 1200px;
  margin: 0px auto;
}
.time-down {
  width: 1200px;
  color: #fff;
  font-weight: bold;
  font-size: 26px;
  background: url("../../assets/images/timeback.png");
  margin: 10px auto;
  padding: 20px;
  text-align: center;
}
.subject {
  .sub-title {
    margin: 0px;
    padding: 20px 30px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    background: #fff;
  }
  .submit {
    background: #fff;
    padding: 20px 0px;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
    .el-button {
      width: 300px;
    }
  }
  .nextlast-box {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 72px;
    background: #fff;
    .btn-box {
      .el-button {
        border: 1px solid #409eff;
        color: #409eff;
      }
      .last-btn {
        width: 160px;
        margin: 0px 30px;
      }
      .next-btn {
        width: 160px;
        margin: 0px 30px;
      }
    }
  }
  background: #eee;
  .right-content {
    min-height: 848px;
    .datika {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      padding: 20px 0px;
      margin: 0px 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
    }
    background: #fff;
    margin-top: 10px;
    .option {
      margin: 0px 30px;
      .qus-type {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
.answer-content {
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  display: flex;
  margin-top: 20px;
  .tip {
    font-size: 16px;
    padding: 20px 20px 20px 0px;
    white-space: nowrap;
  }
  .content {
    font-size: 16px;
    padding: 20px 20px 20px 0px;
    width: 100%;
    word-break: break-all;
  }
}
.check-answer {
  display: flex;
  justify-content: space-evenly;
  padding: 30px 0px;
  margin: 40px auto;
  background: #fff;
}
.scrollMenuBox {
  background: #fff;
  min-height: 344px;
  .subbox-box {
    font-size: 16px;
    padding: 0px 30px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .tihao {
        margin-right: 10px;
        display: inline-block;
        width: 19px;
        height: 30px;
        text-align: center;
        line-height: 25px;
        color: #fff;
        font-size: 14px;
        background: url("../../assets/images/tihao.png") 100% no-repeat;
      }
    }
  }
}

/*隐藏水平滚动条*/
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
